<template>
	<view class="chat-details">
		<view class="record-box" @touchmove="moveHandle" @tap="startHandle">
			
			<!-- <zmm-watermark :watermark="watermark" :margin="80"></zmm-watermark> -->
			<uni-load-more v-if="!isMobile" :status="load_more" iconType="circle" :content-text="contentText"></uni-load-more>
			<view v-for="(item, i) in msg_history" :key="i" :id="'msg'+ i" :style="{opacity: i<historyMsgLenght?0:1}">
				<view class="cp-item" v-if="item">

					<view class="time" v-if="isShowTime(item.createTime, i-1)&&item.content">
						<text>{{utils.handleDetailsTs(item.createTime)}}</text>
					</view>
					<view>
						<view class="chat-box" :class="[{'receive': wsToId == fromIdShow(item), 'send': wsToId != fromIdShow(item)}]" v-if="item.content" @click="showMsgTime(item.createTime, item)">
						
							<view class="head">
								<image :src="headHandle(item)" @click="seeUserDetails(item)" mode="aspectFill"></image>
							</view>
							<view class="chat-content" @longpress="showToolTip($event,i)">
								<view class="content" v-if="item.msgType==0">
									<text>{{item.content}}</text>
									<!-- <text-editor :id-name="`editorChat${i}${item.sessionId}`" :read-only="true" 
									:info="{content: item.content, height: 'auto'}"></text-editor> -->
								</view>
								<view class="picture-list" v-else-if="item.msgType==1">
									<view v-for="(url, index) in JSON.parse(item.extras).dst_path" :key="index" @click.stop="viewImage(item, index)"><image :src="url" mode="widthFix"></image></view>
								</view>
								<view class="voice-content" v-else-if="item.msgType==2&&JSON.parse(item.content)[0].size>0">
									<!-- #ifdef APP-PLUS -->
									<zy-audio :ref="'ref'+i" :refi="'ref'+i" @playAudio="playAudio" @pauseAudio="suspendAudio" @sliderChange="timeUpAudio" :totalTime="JSON.parse(item.content)[0].size" 
									:src="JSON.parse(item.extras).dst_path?JSON.parse(item.extras).dst_path[0]:''"></zy-audio>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<text>语音消息</text>
									<!-- #endif -->
									<!-- <uni-icons customPrefix="iconfont" :type=" wsToId == fromIdShow(item)?'icon-yuyin1':'icon-yuyin2'" ></uni-icons> -->
								</view>
								<view class="video-content" v-else-if="item.msgType==3">
									<!-- #ifdef APP-PLUS -->
									<zy-video 
										:ref="'videoRef'+i"
										:refi="'videoRef'+i"
										@playVideo="playVideo"
										:width="140"
										:height="180"
										:src="JSON.parse(item.extras).dst_path&&JSON.parse(item.extras).dst_path[0]"></zy-video>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<zy-video 
										:ref="'videoRef'+i"
										:refi="'videoRef'+i"
										:width="140"
										:height="180"
										@playVideo="playVideo"
										:src="JSON.parse(item.extras).dst_path&&JSON.parse(item.extras).dst_path[0]"></zy-video>
									<!-- #endif -->
								</view>
								<view class="share-content" v-else-if="item.msgType==6">
									<view class="sc-info" @click.stop="onSharelink(JSON.parse(item.content).path)">
										<view v-if="JSON.parse(item.content).taskId">
											<text-editor :id-name="`editorChat${i}`" :read-only="true" 
												:info="{content: JSON.parse(item.content).text, height: 'auto'}"></text-editor>
										</view>
										<view v-else class="sc-title">{{JSON.parse(item.content).text}}</view>
										<view class="sc-from">
											<view class="sc-name">
												<view v-if="JSON.parse(item.content).comeFrom">{{JSON.parse(item.content).comeFrom}}</view>
												<text>{{JSON.parse(item.content).num}}</text>
											</view>
											<image class="sc-image" v-if="JSON.parse(item.content).img.indexOf('chat/')==-1" :src="JSON.parse(item.content).img" mode="aspectFill"></image>
											<image class="sc-image" v-else-if="JSON.parse(item.extras).dst_path" :src="JSON.parse(item.extras).dst_path[0]" mode="aspectFill"></image>
										</view>
									</view>
									<view class="sc-bottom">
										<image :src="JSON.parse(item.content).icon" mode="aspectFill"></image>
										<text>{{JSON.parse(item.content).from || 'MBTI测试'}}</text>
									</view>
								</view>
								<view class="file-list" v-else-if="item.msgType==8">
									<!-- #ifdef APP-PLUS -->
									<view v-for="(url, index) in JSON.parse(item.extras).dst_path" :key="index">
										<zy-file chat="1" :src="url" :name="JSON.parse(item.content)[index].name" :size="JSON.parse(item.content)[index].size"></zy-file>
									</view>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<view v-for="(file, index) in JSON.parse(item.content)" :key="index">
										<zy-file chat="1" :src="file.path" :name="JSON.parse(item.content)[index].name" :size="JSON.parse(item.content)[index].size"></zy-file>
									</view>
									<!-- #endif -->
								</view>
								<view class="is-read" v-if="wsToId != fromIdShow(item)">
									<uni-icons customPrefix="iconfont" size="26rpx" :type="item.isRead==1?'icon-gouxuan':'icon-weigouxuan'" :color="item.isRead==1?'#4DBAC7':'#BABABA'"></uni-icons>
								</view>
								<image class="oper-tag" v-if="toolTipFlag == item.createTime" :class="dynPlace" src="/static/chat/black.png" mode="aspectFill"></image>
								<view v-if="toolTipFlag == item.createTime" class="msg-oper-box" :class="dynPlace">
									
									<view class="op-item" v-for="oper in toolTipData" :key="oper.icon" @click.stop="tapPopup(oper)" :style="{display: oper.disabled?'none':'flex'}">
										<image class="icon" :src="`/static/chat/${oper.icon}.png`" mode="aspectFill"></image>
										<text>{{oper.title}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view v-else class="recall-msg-tips">
							{{wsToId == fromIdShow(item)?'对方撤回了一条消息':'你撤回了一条消息'}}
						</view>
					</view>

					<view :class="['bottom-time', {'textAlign': wsToId == fromIdShow(item)}]" v-if="currentMsgTime==item.createTime&&item.content">
						<text>{{utils.handleDetailsTs(item.createTime)}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view :style="{height: inputContHeight}"></view>
		<view class="input-cont">
			<view class="box">
				<view class="text-inp">
	
					<textarea class="text" :focus="msg_focus" @focus="focusHandel" @blur="blurHandle"
					@input="bindTextAreaInput" :value="inputText" @linechange="linechange" auto-height maxlength="300" :confirm-hold="true" :hold-keyboard="holdKeyboard" :auto-blur="true" cursor-spacing="30" />
				</view>
				<view class="send-module">
					<view v-for="item in sendModule" :key="item.id">

						<image v-if="item.icon!='wj'" :src="`/static/chat/${item.icon}${item.icon=='fs'&&inputText?1:''}.png`" @click="iconOnclick(item.icon)" mode="aspectFill"></image>
						<!-- 使用用户id -->
						<upload-btn
                            v-else
                            :icon-info="{width: '44rpx', icon: '/static/chat/wj.png'}"
                            :userId="parseInt(detail_info.id)"
							type="file"
                            @chooseFile="chooseFile"
                        ></upload-btn>
					</view>
				</view>
			</view>
			<view class="emoji-list" v-show="isShowEmoji">
				<view class="em-icon" @click="clickEmoji(str)" v-for="(str, i) in utils.emojiList" :key="i"><text>{{str}}</text></view>
			</view>
			<view class="module-list" v-show="isShowModule">
				<view class="item">
					<upload-btn
						:icon-info="{width: '60rpx', icon: '/static/chat/tp.png'}"
						:userId="parseInt(detail_info.id)"
						type="image"
						@chooseFile="chooseFile"
					></upload-btn>
					<text>图片</text>
				</view>
				<view class="item">
					<upload-btn
						:icon-info="{width: '60rpx', icon: '/static/chat/sp.png'}"
						:userId="parseInt(detail_info.id)"
						type="video"
						@chooseFile="chooseFile"
					></upload-btn>
					<text>视频</text>
				</view>
			</view>
			<!-- <view v-show="record_voice" class="vo-box">
				<view class="rv-tips"><text>按住录音</text></view>
				<view class="start-position"></view>
				<view class="record-voice-btn" @touchstart="vtTouchstart" @touchmove="vtTouchmove"  @touchend="vtEndRecord">
					<uni-icons type="mic" size="60rpx" color="#FFF"></uni-icons>
				</view>
			</view> -->
			<view class="record-voice-box" :style="{'position': start_record?'fixed':'relative'}" v-show="record_voice">
				<view class="vo-box" :style="{'position': start_record?'absolute':'relative'}">
					<view class="del-voice" v-show="start_record" :class="{'del-voice-active': movePageY>20}" :style="{height: `${movePageY>20?(50-movePageY+20):50}px`}">
						<uni-icons type="trash" size="48rpx" color="#fff"></uni-icons>
					</view>
					<view class="voice-tips" v-show="start_record" :style="{marginTop: `${40-2*movePageY}px`, marginBottom: `${40+movePageY}px`, background: movePageY<=20?'#55acee':'#f44'}">
						<view class="icon">
							<uni-icons type="mic" size="48rpx" :color="movePageY<=20?'#55acee':'#f44'"></uni-icons>
						</view>
						<view class="vo-text">
							<view class="">
								<image class="yinpin" src="/static/yinpin.png" mode="widthFix"></image>
							</view>
							<text>{{movePageY>=20?'松开手指':'手指上滑'}}，取消发送</text>
						</view>
					</view>
					<view v-show="!start_record" class="rv-tips"><text>按住录音</text></view>
					<view class="start-position"></view>
					<view class="">
						<view class="record-voice-btn" @touchstart="vtTouchstart" @touchmove="vtTouchmove"  @touchend="vtEndRecord">
							<uni-icons type="mic" size="60rpx" color="#FFF"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
let isMobile = true, isLoadMore = true;
/*
	isMobile是否是手机 true是手机，false是pc
	在pc端监听滚动事件onmousewheel
*/
// #ifdef H5
document.onmousewheel = function(e){
	if(isMobile) return;
	let scrollTop = document.body.scrollTop||document.documentElement.scrollTop
	if(e.wheelDelta > 0){
		if(scrollTop<=0 && isLoadMore){
			setLoadMore('loading')
			isLoadMore = false; // 数据返回之前不再发请求
			toupper(179)
		}
	}else{
	}
}
// #endif
// #ifndef H5
let startPageX = 0, startPageY = 0; // 语音录制时手指移动的参数

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
// #endif

import SparkMD5 from 'spark-md5'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

import ZyFile from '../../uni_modules/zy-file/components/zy-file/zy-file.vue';
import md5Str from '@/static/md5.min.js'
import textEditor from '../student/components/text-editor.vue'
import uploadBtn from '../student/components/select-upload-file.vue'
//使用这种方法获取输入的内容
// let content = this.$refs.chat.$refs['input-content'].$el.innerHTML
	export default {
		components: {
			uniLoadMore,
			ZyFile,
			textEditor,
			uploadBtn
		},
		data(){
			return {
				currentHandleMsg: {},
				currentHandleIndex: -1,
				toolTipFlag:false,
				toolTipData:[
					{id:1,icon:'recall', title:'撤回',disabled:false},
					{id:2, icon:'copy', title:'复制',disabled:false},
					{id:3, icon:'del',title:'删除',disabled:false},
					{id: 4, icon: 'relay', title: '转发', disabled: false}
				],

				watermark: '',
				userInfo: {},
				detail_info: {},
				chatContent: {content: '', placeText: '', height: '36rpx'},
				inputText: '',
				msg_history: [],
				hisPage: 1,
				maxLenght: 20,
				scrollTop: 10000,
				isMobile: true,
				endTime: '',
				beginTime: '',
				load_more: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: ' ',
					contentnomore: ' '
				},
				historyMsgLenght: 0,
				to_from_id: '',
				show_oper_box: false,
				dynPlace: '',
				msg_opers: [{icon: 'recall', name: '撤回'}, {icon: 'copy', name: '复制'}, {icon: 'del', name: '删除'}],
				disMsgData: false, 
				currentMsgTime: '',
				isfocus: false,
				msg_focus: false,
				fromUserType: '',
				toUserType: '',
				wsToId: '',
				wsFromId: '',
				holdKeyboard: false,
				inputContHeight: '183rpx',
				getHeightNum: 0,
				isShowEmoji: false,
				isShowModule: false,

				sendModule: [{icon: 'bq', id: 1}, 
				// #ifdef APP-PLUS
				{icon: 'yy', id: 2}, 
				// #endif
				{icon: 'tp', id: 3}, {icon: 'wj', id: 4}, {icon: 'fs', id: 5}],
				sendMsgType: 1,
				viewImageI: 0,
				confirmImages: [], // 需要确认的所有图片
				sendImages: [], // 需要发送的所有图片

				videoRefIndex: '',
				voicePath: '',
				record_voice: false,
				movePageY: 0,
				start_record: false,
				audio: null,
				audioDuration: 0
			}
		},
		computed: {
			editor () {
				return this.$refs.myQuillEditor.quill
			}
		},
		onReady() {
			
		},
		onLoad(options) {
			// #ifndef H5
			let that = this
			recorderManager.onStop(function (res) {				
				if(that.movePageY<=20){
					innerAudioContext.src = res.tempFilePath;
					innerAudioContext.onCanplay(() => {
						that.audioDuration = Math.ceil(innerAudioContext.duration)
						that.voicePath = res.tempFilePath;
						that.sendMsgType = 2
						let type = res.tempFilePath.split('.').pop(),
						str = md5Str(res.tempFilePath),
						files = {path: res.tempFilePath}
						// console.log(323, type, str, files)
						that.getUpload([{upType: type, md5: str}], [files])
					});
				}
				that.movePageY = 0
			});
			// #endif

			this.detail_info = options
			this.toUserType = options.toUserType?options.toUserType:2;
			// userType，2是学生，1是老师。wsToId是指当前两天的对象的ws的id
			this.wsToId = options.accountId;

			getApp().globalData.receiveMsgId = this.wsToId
			// #ifdef H5  
			window.toupper = ()=>{
				this.toupper(358)
			}
			window.setLoadMore = (type)=>{
				this.setLoadMore(type)
			}
			if (navigator.userAgent.indexOf('Mobile') === -1) {  
				this.isMobile = false  
				isMobile = false
			}  
			let node = document.getElementsByClassName('message-prompt')[0]
			if(node){
				document.body.removeChild(node);
			}
			// #endif
			uni.setNavigationBarTitle({
				title: options.name
			})
			
			uni.$on('privateChat', this.getMsg); // 实时聊天监听
			uni.$on('newMsgHis', this.getNewHis) // 获取离线或者断线消息时监听
			let end = new Date().getTime(),
			begin = new Date(new Date().setDate(new Date().getDate() - 14)).getTime();

			this.beginTime = parseInt(begin/1000)
			this.endTime = parseInt(end/1000)

			this.getMsgHistory() // 获取历史记录
		},
		onShow(){
		},
		onUnload(){
			// 离开页面的时候，把当前聊天的红点清掉，监听断开
			let newMsgHis = uni.getStorageSync('newMsgHis');
			let userId = this.to_from_id
			if(newMsgHis[userId]){
				newMsgHis[userId].count=0;
				
				uni.setStorageSync('newMsgHis', newMsgHis);
			}
			this.utils.showRedDot(newMsgHis, userId)
			uni.$off('privateChat', this.getMsg)
			uni.$off('newMsgHis', this.getNewHis)
			getApp().globalData.receiveMsgId = ''
		},
		onPullDownRefresh() {
			this.toupper(403)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		// #ifdef H5
		onPageScroll(e){
			if(!isMobile) return;
			if(e.scrollTop==0){
				this.setLoadMore('loading')
				this.toupper(410)
			}
		},
		// #endif
		methods: {
			fromIdShow(item){
				return item.from || item.fromId
			},
			showToolTip:function(e,index){
				let toolTipX = e.touches[0].clientX;
				let toolTipY = e.touches[0].clientY;
				this.dynPlace = this.getPlacement(toolTipX, toolTipY)
	
				this.currentHandleIndex = index
				this.currentHandleMsg = this.msg_history[index];
				// return

				this.currentHandleMsg.msgIndex=index;
				let msgType= this.currentHandleMsg.msgType;
				this.toolTipData = [
					{id:1,icon:'recall', title:'撤回',disabled:false},
					{id:2, icon:'copy', title:'复制',disabled:false},
					{id:3, icon:'del',title:'删除',disabled:false},
					{id: 4, icon: 'relay', title: '转发', disabled: false}
				]
				if(msgType!=0){
					this.$set(this.toolTipData, 1, {id:2, icon:'copy', title:'复制',disabled:true})
				}
				
	
				this.toolTipFlag = this.currentHandleMsg.createTime;
	
				let nowTimeMills=new Date().getTime();
				let diff = nowTimeMills - this.toolTipFlag;

				// let twoMinutes = 60 * 1000 * 60 * 24; //1天
				let twoMinutes = 60 * 1000 * 1; //1天
	
				if(diff > twoMinutes || this.fromIdShow(this.currentHandleMsg)!=this.wsFromId){
					this.$set(this.toolTipData, 0, {id:1,icon:'recall', title:'撤回',disabled:true})
				}
			},
			getPlacement(x,y){
				let width = uni.getSystemInfoSync().windowWidth
				let height = uni.getSystemInfoSync().windowHeight
				if(y>height/2){
					return 'oper-bottom'
				}else{
					return 'oper-top'
				}
			},
			tapPopup(e){
				let that=this;
				//console.log("操作选项",e);
				if(e.title=="撤回"){

					let data = {
						requestEventType: 7,
						to: this.currentHandleMsg.to,
						createTime: this.currentHandleMsg.createTime
					}
					uni.sendSocketMessage({
						data: JSON.stringify(data)
					});
					return
				}
				if(e.title=="复制"){

					let copyContent = that.currentHandleMsg.content;
					// let formatStr = this.replaceReseverEmoji(copyContent);

					that.utils.uniCopy({
						content:copyContent,
						success:(res)=>{
						uni.showToast({
							title: res,
							icon: 'none'
						})
						},
						error:(e)=>{
						uni.showToast({
							title: e,
							icon: 'none',
							duration:3000,
						})
						}
					})
					that.toolTipFlag=false;
					return;
				}
				if(e.title=="删除"){
					that.toolTipFlag=false;
					this.utils.showModal('', '确认删除消息？', ()=>{
						let tableName = this.toUserType==1?'totmsg':'tosmsg';

						getApp().globalData.mysql.deleteLine(tableName, 'sessionId', that.currentHandleMsg.sessionId, that.currentHandleMsg.createTime, function(res1){

							let max_len = that.msg_history.length-1
							if(that.currentHandleIndex == max_len){
								let lastItem = that.msg_history[max_len-1];
								let newMsgHis = uni.getStorageSync('newMsgHis');
								let userId = that.to_from_id
								if(newMsgHis[userId]){
									let lastData = newMsgHis[userId].data
									newMsgHis[userId].data[0] = lastItem || {};
									uni.setStorageSync('newMsgHis', newMsgHis);
								}
							}
							that.msg_history.splice(that.currentHandleIndex, 1)
						})
					})
					
					return
				}
				if(e.title == '转发'){
					that.toolTipFlag=false;
					// this.currentHandleMsg.name = this.userInfo.name
					uni.setStorageSync('xdrelayMsg', that.currentHandleMsg)
					uni.navigateTo({
						url: '/pages/noticeInfo/recent-contacts'
					})
				}
			},

			onSharelink(url){
				uni.navigateTo({
					url: url
				})
			},
			insertItem (item) {
				const mention = this.editor.getModule('mention')
				mention.insertItem({ id: 1, value: '张三', denotationChar: '@' }, true)
			},
			chooseFile(type, list, sendList){
				if(sendList.length==0) return
				this.sendMsgType = type;
				// this.work_files = sendList
				let chatSendList = []
				for(let i=0; i<sendList.length; i++){
					let info = sendList[i]
					if(type==8){
						let obj = {
							name: info.name,
							path: info.path,
							size: info.size
						}
						chatSendList.push(obj)
					}else{
						chatSendList.push(info.path)
					}
					
					
				}
				// console.log(570, chatSendList, type)
				this.sendMessage(this.sendMsgType, JSON.stringify(chatSendList))
			},

			recordVoice(){
				this.record_voice = !this.record_voice;
				if(this.record_voice){
					
					this.linechange();
					this.$nextTick(()=>{
						this.getHeight(1)
						const query = uni.createSelectorQuery().in(this);
						query.select('.start-position').boundingClientRect(data => {
							startPageY = data.top
							
						}).exec();
					})
					
				}
			},
			vtTouchstart(e){
				this.start_record = true;
				recorderManager.start();
			},
			vtTouchmove(e){
				let detail = e.changedTouches[0]
				// let movePageY = 0
				// if((startPageY-detail.clientY) >= 0){
					this.movePageY = startPageY - detail.clientY
					this.movePageY = this.movePageY<0?0:this.movePageY<=40?this.movePageY:40

				// }
			},
			vtEndRecord(e){
				this.start_record = false;
				// this.movePageY = 0
				
				recorderManager.stop();
			},
			//语音播放
			initAudio(src, value){
				if(this.audio){
					this.audio.destroy();
				}
				this.audio = uni.createInnerAudioContext();
				this.audio.src = src;
				this.audio.onCanplay(() => {
					if(this.isSeek){
						this.audio.seek(value);
					}else{
						this.$refs[this.refIndex][0].onCanplay(Math.ceil(this.audio.duration));
					}
					this.isSeek = false;
				});
				this.audio.onPlay(() => {
					
				
				});
				this.audio.onError((res) => {
					this.audio.destroy();
					this.$refs[this.refIndex][0].onEnded();
					this.refIndex = '';
					this.isSeek = false;
				});
				this.audio.onTimeUpdate(() => {
					//按秒输出给子组件
					if(this.audioSecond != new Date().getSeconds() && this.refIndex){
						this.$refs[this.refIndex][0].onTimeUpdate();
						this.audioSecond = new Date().getSeconds();
					}
				});
				this.audio.onEnded(() => {
					this.audio.destroy();
					this.$refs[this.refIndex][0].onEnded();
					this.refIndex = '';
					this.isSeek = false;
				});
				
			},
			//子组件控制父组件播放
			playAudio(refi, src){
				this.isSeek = false;
				//1.本来没有播放,第一次开始播放
				//2.本来有一个在播放,要播放另一个
				//3.本来有一个在播放的暂停了,要继续播放这一个
				if(this.refIndex == refi){
					this.play();
				}else{
					if(this.refIndex){
						this.$refs[this.refIndex][0].onEnded();
					}
					this.refIndex = refi;
					
					this.initAudio(src, 0);
					this.play();
				}
			},
			//子组件控制父组件暂停
			suspendAudio(){
				if(this.audio){
					this.audio.pause();
				}
			},
			play(){
				if(this.audio){
					this.audio.play();
				}
			},
			//子组件控制父组件进度
			timeUpAudio(refi, src, value){
				this.isSeek = true;
				
				if(this.refIndex && this.refIndex != refi){//存在播放,并且这次和之前的不同
					this.$refs[this.refIndex][0].onEnded();
					this.refIndex = refi;
					this.initAudio(src, value);
					this.play();
				}else if(this.refIndex && this.refIndex == refi){//存在播放,并且这次和之前的相同
					this.audio.seek(value);
				}else if(!this.refIndex){//不存在播放
					this.refIndex = refi;
					this.initAudio(src, value);
					this.play();
				}
			},
			// playVoice(src) {
			// 	// #ifdef APP-PLUS
			// 	if (src) {
			// 		innerAudioContext.src = src;
			// 		innerAudioContext.play();
			// 		console.log(src)
			// 	}
			// 	// #endif
			// },
			uploadFile(path, info, len){
				this.sendImages = []
				let that = this
				let uploadUrl = `https://${info.uploadUrl}/`
				uni.uploadFile({
					url: uploadUrl, 
					filePath: path,
					formData: {
						key: info.key,
						AccessKeyId: info.accessKeyId, // 删除 之后改成info.accessKeyId
						Policy: info.policy,
						Signature: info.signature
					},
					success: (uploadFileRes)=>{
						// console.log(604, uploadFileRes);
						if(uploadFileRes.data=='')
						this.sendImages.push({path: info.key, size: this.audioDuration});
						
						if(this.sendImages.length == len){
							that.confirmUploadFile(this.confirmImages)
						}
						
					},fail:(err)=>{
					}
				})
			},
			confirmUploadFile(info){
				this.api.post('file/confirmUploadFile', {
					confirmFile: JSON.stringify(info)
				}).then(res=>{
					if(res.data.state != 'ok') return;
					// console.log(623, this.sendImages);
					this.sendMessage(this.sendMsgType, JSON.stringify(this.sendImages))
					
				})
			},
			getUpload(fileInfo, files){
				// fileInfo,{upType: type, md5: str};files 上传获取的路径
				let fileInfoStr = JSON.stringify(fileInfo)
				// return
				this.api.get('file/getUploadMsgFileParams', {
					fileInfo: fileInfoStr,
					id: this.detail_info.id,
					type: this.toUserType
				}).then(res=>{
					if(res.data.state != 'ok') return;
					let list = res.data.needUpload || [];
					this.confirmImages = [];
					for(let i=0; i<list.length; i++){
						this.confirmImages.push({type: fileInfo[i].upType, key: list[i].key, md5: fileInfo[i].md5})

						this.uploadFile(files[i].path, list[i], files.length)
					}
				})
			},
			previewImage(list){
				uni.previewImage({
					current: this.viewImageI,
					urls: list,
					longPressActions: {
						success: function(data) {
							
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			viewImage(item, index){
				this.utils.getDownloadImage(item, index, this)
			},
			
			// 播放视频
			playVideo(refi){
				
				if(this.videoRefIndex){
					this.$refs[this.videoRefIndex][0].pauseVideo();
				}
				this.videoRefIndex = refi;
			},
			headHandle(item){
				// 处理头像显示
				let userType = '', info = {}, str = '';

				if(this.fromIdShow(item) == this.wsToId){
					userType = this.toUserType
					info = this.detail_info
				}else{
					userType = this.fromUserType
					info = this.userInfo
					
				}
				info.userType = userType
				str = this.utils.headImage(info)
				return str;
			},
			// 查看个人详情页
			seeUserDetails(item){
				let info = {}
				if(this.fromIdShow(item) == this.wsToId){
					info = this.detail_info
				}else{
					info = this.userInfo
					
				}
				this.utils.userDetails(info.accountId, info.userType)
			},
			isShowTime(time, i){
				// 上下消息每隔一小时显示中间的时间
				let flag = false
				if(this.msg_history[i]){
					if(time-this.msg_history[i].createTime>=60*60*1000){
						flag = true;
					}
				}else{
					flag = true
				}
				return flag
			},
			showMsgTime(time, item){
				// 点击消息时显示时间
				this.msg_focus = this.isfocus;
				// #ifdef APP-PLUS
				if(this.msg_focus) {
					this.isfocus = false;
					return
				};
				// #endif
				if(this.currentMsgTime == time){
					this.currentMsgTime = '';
					return
				}
				this.currentMsgTime = time;
			},
			iconOnclick(icon){
				if(icon == 'fs'){
					this.sendMessage(0, this.inputText)
					return;
				}
				if(icon == 'yy'){ // 语音
					// #ifdef H5
					console.log('h5不支持')
					// #endif
					// #ifndef H5
					this.isShowEmoji = false
					this.isShowModule = false
					this.recordVoice()
					// #endif
					return
				}
				let type = icon=='bq'?'isShowEmoji':'isShowModule'
				if(icon=='bq'){
					this.isShowEmoji = !this.isShowEmoji
					this.record_voice = false; this.isShowModule = false
				}else if(icon == 'tp'){
					this.isShowModule = !this.isShowModule
					this.isShowEmoji = false;
					this.record_voice = false;
				}
				if(!this[type]){
					this.msg_focus = true
					this.inputContHeight = '183rpx'
				}else{
					this.linechange();
					this.$nextTick(()=>{
						this.getHeight(1)
					})
				}
			},
			moveHandle(){
				// #ifdef H5
				this.hideModule()
				uni.hideKeyboard()
				// #endif
			},
			startHandle(){
				this.toolTipFlag = ''
				this.isfocus = false;
			},
			getNewHis(o){
				let newMsgHis = o;
				
				let userId = this.to_from_id

				if(newMsgHis[userId]&&newMsgHis[userId].count>0){

					this.hisPage = 1
					
					this.disMsgData = true;
					let end = new Date().getTime(),
					begin = new Date(new Date().setDate(new Date().getDate() - 14)).getTime();
					this.beginTime = parseInt(begin/1000)
					this.endTime = parseInt(end/1000)
					
					this.msg_history = [];
					this.getMsgHistory()
				}
				
			},
			getMsg(data){
				if (data.returnEventType == 8 || data.returnEventType == 10){
					// 更改阅读状态
					let msgInfo = JSON.parse(data.content)
					let editIndex = this.msg_history.findIndex(item=>item.createTime==msgInfo.createTime), 
						editItem = this.msg_history[editIndex] || {}
						if(data.returnEventType == 8){
							editItem.isRead = 1;
						}else{
							editItem.content = ''
						}
						
					this.$set(this.msg_history, editIndex, editItem)
					return
				}
				let msg = data.msg
				msg = data.msg?data.msg.privateMsgList:[];
				if(data.msg.more && msg.length==0){
					this.toupper()
					return
				}
				let len = this.msg_history.length,
				returnEventType = data.msg.returnEventType;

				let dataInfo = msg&&msg[0]?msg[0]:{};
				
				let sessionId = this.utils.getSessionId(this.wsToId,this.wsFromId );
				let msgSessionId = dataInfo.sessionId || ''
				// console.log(msgSessionId, this.wsToId, sessionId)
				if(msgSessionId.indexOf(this.wsToId)==-1 || msgSessionId.indexOf(this.wsFromId)==-1) {
					setTimeout(()=>{
						isLoadMore = true;
						this.setLoadMore('noMore')
					}, 1000)
					uni.stopPullDownRefresh();
					return
				}
				let tableName = this.toUserType==1?'totmsg':'tosmsg'
				this.addChatSession()
				if(returnEventType == 2 || returnEventType == 5){
					let allMsg = this.utils.deDuplication(this.msg_history, msg, sessionId, this.wsFromId, this.toUserType)

// console.log(945, this.msg_history)
					if(msg.length>0){
						// 第一次获取服务器上的记录
						this.hisPage = Math.ceil(msg.length/20)+1;
						// 缓存最新的一条数据
						
						let newMsg = uni.getStorageSync('newMsgHis')||{};
						
						newMsg[this.to_from_id] = {}
						newMsg[this.to_from_id].data = [allMsg[allMsg.length-1]];
						uni.setStorageSync('newMsgHis', newMsg);
						// 本地的数据和服务器上的数据不一样时，删除本地缓存，存储服务器返回的数据
						if(len>0){
							getApp().globalData.mysql.deleteData(tableName, 'sessionId', sessionId, function(res1){
								getApp().globalData.mysql.addmData(tableName, allMsg, function(res){
									// console.log(835, res)
								})
							})
						}else if(len==0){
							getApp().globalData.mysql.addmData(tableName, allMsg, function(res){
								// console.log(840, tableName, res)
							})
						}
						
					}
					this.msg_history = allMsg;
					// 下载文件
					for(let i=0; i<allMsg.length; i++){
						let msgItem = allMsg[i]
						// #ifdef APP-PLUS
						if((msgItem.msgType==1||msgItem.msgType==2||msgItem.msgType==3||msgItem.msgType==8) && (!msgItem.extras || !JSON.parse(msgItem.extras).dst_path))
						// #endif
						// #ifdef H5
						if((msgItem.msgType==1||msgItem.msgType==3) && (!msgItem.extras || !JSON.parse(msgItem.extras).dst_path))
						// #endif
						{
							this.utils.getFileDownloadUrl(msgItem, this)
						}
					}
					this.$nextTick(()=>{
						if(len > 0 && returnEventType==2){
							this.getHeight(2)
						}else if(returnEventType==5){
							this.getHeight(1)
						}
					})
					setTimeout(()=>{
						isLoadMore = true;
						this.setLoadMore('noMore')
					}, 1000)
					uni.stopPullDownRefresh();
					
				}else if(returnEventType == 1){
					this.msg_history = this.utils.deDuplication(this.msg_history, msg, sessionId, this.wsFromId)
					// this.msg_history = this.msg_history.concat(msg)

					
					if(this.fromIdShow(dataInfo)==this.wsFromId){
						this.$nextTick(() => {
							this.getHeight(1)
						})
					}else{
						// this.utils.sendSocketMsg(msg[0], this.toUserType)
					}
				}
				// console.log(908, this.msg_history)
				if(len == 0){ // 刚进页面时获取历史记录
					this.$nextTick(() => {
						this.getHeight(1)
					})
				}
				
			},
			
			addChatSession(){
				let friendList = uni.getStorageSync('xiaode_friend_list'), id = this.detail_info.id;// 使用用户id
	
				if(friendList.findIndex(item=>item.accountId == this.detail_info.accountId) != -1) return;

				this.api.post('chatGroupManage/addChatSession', {
					accountId: this.detail_info.accountId
				}).then(res=>{
					if(res.data.state != 'ok') return;
					// let data = {
					// 	id: id,
					// 	name: this.detail_info.name,
					// 	avatarUrl: `["${this.detail_info.avatarUrl}"]`,
					// 	sex: ,
					// 	userType: this.toUserType
					// }
				})
			},
			setLoadMore(type){
				this.load_more = type
			},
			toupper(t){
				console.log('toupper', t)
				this.getMsgHistory()
				
			},
			getMsgHistory(){
				this.userInfo = getApp().globalData.userInfo || {}
				if(!this.userInfo.id){ // 判断用户信息是否存在
					setTimeout(()=>{
						this.getMsgHistory()
					}, 100)
					return;
				}
				this.fromUserType = this.userInfo.user_type;
				this.watermark = this.userInfo.name
				this.wsFromId = this.userInfo.accountId
				
				let sessionId = this.utils.getSessionId(this.wsToId,this.wsFromId )

				this.to_from_id = `${this.wsToId}${this.wsFromId}`
				let tableName = this.toUserType==1?'totmsg':'tosmsg'
				getApp().globalData.mysql.getDataByPage(tableName, 'sessionId', sessionId, this.hisPage, 20, (res)=>{
					// console.log(tableName, sessionId, 944, res)
					if(res.length==0){ // 没有本地的历史记录
					
						
						let data = {
							"requestEventType": 3,
							"msgType": 0, 
							"to": this.wsToId,
							"beginTime": this.beginTime,
							"endTime": this.endTime,
							"extras": {}
						}
						uni.sendSocketMessage({
							data: JSON.stringify(data),
							success: ()=>{
								// 向服务器发送请求之后，改变时间
								this.endTime = this.beginTime;
								this.beginTime = this.endTime - 14*24*60*60;
							}
						});
						return
					}
					setTimeout(()=>{
						isLoadMore = true;
						this.load_more = 'noMore'
					}, 2000)
					// #ifdef APP-PLUS
					res = res.reverse()
					// #endif
					if(this.hisPage>1){
						this.historyMsgLenght = res.length;
					}
					let list = []
					for(let i=0; i< res.length; i++){
						let item = res[i]
						if(this.msg_history.findIndex(hisItem=>item.createTime==hisItem.createTime)==-1){
							list.push(item)
						}
						if(item.to==this.wsFromId&&item.isRead!=1 && JSON.parse(item.extras).readState!=1){
							// console.log(976, item, JSON.parse(item.extras).readState, this.fromIdShow(item))
							// return
							this.utils.sendSocketMsg(item, this.toUserType)
							
						}
						// #ifdef H5
						if(((item.msgType==1||item.msgType==3) && (!item.extras || !JSON.parse(item.extras).dst_path)) || ((item.msgType==6&&JSON.parse(item.content).img.indexOf('chat/')!=-1))){
							this.getDownloadUrl(item)
						}
						// #endif
						
					}
					this.msg_history = list.concat(this.msg_history);
					uni.stopPullDownRefresh();
					this.$nextTick(() => {
						if(!this.disMsgData){ // 获取断线消息的时候disMsgData=true，不执行hisPage+1
							this.getHeight(this.hisPage)
							this.disMsgData = false;
							this.hisPage++
						}else{
							this.getHeight(1)
							this.hisPage = 2
						}
						
						
					})
				})
			},
			οnkeydοwn(event){
				
			},
			sendMessage(msgType, content){
				// 发送消息
				let str = content
				if(msgType == 0){
					str = content.trim()
				}
				
				if(msgType==7 || msgType==1){
					if(!isMobile){
						this.hideModule()
						
					}
					
				}
				if(!str){
					return
				}
				// 老师ID加20万，学生id加10万
				let data = {
					"requestEventType": 1,
					"msgType": msgType, 
					"to": this.wsToId,
					"content" : str, 
					"extras": {}
				}
				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: ()=>{
						this.inputText = '';						
						let osName = uni.getSystemInfoSync().osName
						// 如果是ios系统，隐藏键盘
						if(osName == 'ios'){
							uni.hideKeyboard()
						}
					}
				});
			},

			bindTextAreaInput(event){ // 输入聊天内容时执行@input
				this.inputText = event.detail.value;
				
			},
			linechange(){ // 监听换行执行的操作
				let osName = uni.getSystemInfoSync().osName
				this.$nextTick(() => {
					
					this.inputCont()
					if(osName!='ios'){
						// 在安卓手机上，输入消息换行时，滚动到最底部
						// this.getScrollTop()
					}
				})
			},
			blurHandle(){
				// 失去焦点时执行
				this.isfocus = this.msg_focus
				this.msg_focus = false;
			},
			hideModule(){
				this.isShowEmoji = false
				this.isShowModule = false
				this.record_voice = false
				this.inputContHeight = '183rpx'
			},
			focusHandel(){
				this.hideModule()
				this.msg_focus = true // 获取焦点时focus设置为true
				let osName = uni.getSystemInfoSync().osName
				// #ifdef H5
				setTimeout(()=>{
				// #endif
				if(osName!='ios'){
					// 在安卓手机上，键盘弹起时，滚动到最底部
					this.getScrollTop()
				}
				// #ifdef H5
				}, 100)
				// #endif
			},
			getHeight(type){
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				if(page.route!='pages/chatSystem/chat-page') return
				const query = uni.createSelectorQuery().in(this);
				query.select('.record-box').boundingClientRect(data => {
					if(type>1){ 
						// type大于1时，代表已经有一部分聊天记录，拉取更多时执行，目的是为了滚动位置停留在拉取记录之前的位置。
						let newMsgHisHeight = data.height - this.scrollTop - 30;
							uni.pageScrollTo({
								scrollTop: newMsgHisHeight,
								duration: 0
							});
							this.historyMsgLenght = 0
					}
					this.scrollTop = data.height;
					if(this.scrollTop==0 && this.getHeightNum<10){
						this.getHeightNum++
						setTimeout(()=>{
							this.getHeight(type)
						},200)
						return
					}
					this.getHeightNum = 0
					if(type==1){
						this.scrollTop += 44
						// type等于1是第一次获取历史记录，需要滚动到最底部
						this.getScrollTop()
					}
				}).exec();
			},
			getScrollTop(){
				uni.pageScrollTo({
					scrollTop:  this.scrollTop,
					duration: 0
				})
			},
			inputCont(){
				// 获取输入框的高度，防止输入换行时高度变化会压到页面里面的部分内容
				const query = uni.createSelectorQuery().in(this);
				query.select('.input-cont').boundingClientRect(data => {
					this.inputContHeight = data.height+'px';

				}).exec();
			},
			onEditorReady(e){
					uni.createSelectorQuery().select(`#textInp`).context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			bindblur(e){
				this.isfocus = this.msg_focus
				this.msg_focus = false;
				// this.info.content = e.detail.html
				this.inputText = JSON.stringify(e.detail.delta.ops)
			},
			clickEmoji(str){
				this.inputText += str
				
			},
			// H5图片和视频下载
			getDownloadUrl(data){
				let content = data.content
				if(data.msgType == 6){
					content = JSON.stringify([JSON.parse(content).img])
				}else if(data.msgType == 2){
					content = JSON.stringify([JSON.parse(data.content)[0].path])
				}
				this.api.get('file/getDownloadUrl', {
					fileNames: content,
					isThumbnail: data.msgType==1?true:false
				}).then(res=>{
					if(res.data.state != 'ok') return
					let downloadUrl = res.data.downloadUrl || {},
					urls = [];
					urls = Object.values(downloadUrl)
					let extras = JSON.parse(data.extras);

					extras.dst_path = []
					for(let i=0; i<urls.length; i++){
						this.downloadFile(data, urls[i], extras)
					}
				})
			},
			
			downloadFile(data, downloadUrl, extras){
				uni.downloadFile({
					url: downloadUrl, //资源
					success: (res) => {
						if (res.statusCode === 200) {
							// #ifdef H5
							
							// extras.dst_path = extras.dst_path?extras.dst_path:[]
							extras.dst_path.push(res.tempFilePath)
							
							this.$set(data, 'extras', JSON.stringify(extras))

							// #endif

						}
					}
				});
			},
		},
	}
function getpx(rpx){
	
	return rpx / 750 * uni.getSystemInfoSync().windowWidth;
}
function md5 (file, fun){
	var spark = new SparkMD5.ArrayBuffer()
   	//获取文件二进制数据
  	var fileReader = new FileReader()
   	fileReader.readAsArrayBuffer(file) //file就是获取到的文件
   	//异步执行函数
   	fileReader.onload = function (e) {
		spark.append(e.target.result)
		let str = spark.end()
		
		//打印结果这个文件会有一串唯一编码类似下面
		//4b4a94c7ff8953d7103515e91d432b0a
		fun(str)
   }
}
</script>

<style lang="less" scoped>
	page{
		background: #F9F9F9;
	}
	.chat-details{
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		// #ifdef APP-PLUS
		min-height: 100vh;
		// #endif
		// position: relative;
		background: #F9F9F9;
	}
	.cp-item{
		padding: 25rpx 0;
		.time{
			text-align: center;
			margin-bottom: 40rpx;
			font-size: 0;
			text{
				line-height: 33rpx;
				color: #BCBCBC;
				font-size: 24rpx;
			}
		}
		.bottom-time{
			margin-top: 10rpx;
			text-align: right;
			margin-right: 124rpx;
			font-size: 24rpx;
			color: #666;
			&.textAlign{
				text-align: left;
				margin-left: 124rpx;
			}
		}
		.emoji-picture{
			width: 200rpx;
			height: 200rpx;
		}
	}
	
	.chat-box{
		display: flex;
		align-items: flex-start;
		-webkit-touch-callout:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
		.head{
			font-size: 0;
			position: relative;
			z-index: 1;
			image{
				width: 68rpx;
				height: 68rpx;
				border-radius: 34rpx;
			}
		}
		.content{
			// -webkit-user-select: text; /* Safari */
			// -ms-user-select: text; /* IE 10 and IE 11 */
			// user-select: text; /* Standard syntax */
			white-space: pre-wrap;
			position: relative;
			padding: 12rpx 32rpx;
			border-radius: 20rpx;
			line-height: 40rpx;
			max-width: 560rpx;
		}
	}
	.chat-content{
		position: relative;
		margin-top: 35rpx;
	}
	.is-read{
		position: absolute;
		top: -33rpx;
		right: -27rpx;
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 27rpx;
		background: #fff;
		box-shadow: 0 2rpx 7rpx 0 rgba(0, 0, 0, .15);
	}
	.receive{
		padding: 0 56rpx 0 24rpx;
		
		.head{
			margin-right: 24rpx;
		}
		.chat-content{
			margin-left: -35rpx;
		}
		.content{
			background: #fff;
			color: #262E3F;
		}

		.msg-oper-box{
			left: 10rpx;
		}
		.oper-tag{
			left: 62rpx;
		}
		.voice-content{
			text-align: left;
		}
	}
	.send {
		padding: 0 24rpx 0 56rpx;
		flex-direction: row-reverse;
		.head {
			margin-left: 24rpx;
		}
		.chat-content{
			margin-right: -35rpx;
		}
		.content{
			background: #D7D7D7;
			
			color: #22242A;
		}
		.is-read{
			left: -27rpx;
		}

		.msg-oper-box{
			right: 10rpx;
		}
		.oper-tag{
			right: 62rpx;
		}
		.voice-content{
			text-align: right;
		}
	}
	
	.picture-list{
		image{
			min-height: 0;
			width: 120rpx;
		}
	}
	// 语音
	.voice-content{
		min-width: 100rpx;
		padding: 0 20rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	
	// 接收、发送文件的样式
	.file-list{
		.logo{
			width: 80rpx;
			height: 80rpx;
		}
	}
	// 
	.msg-oper-box{
		position: absolute;
		
		padding: 23rpx 20rpx;
		display: flex;
		max-width: 489rpx;
		background-color: #22242A;
		color: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		z-index: 110;
		.icon{
			width: 38rpx;
			height: 38rpx;
			margin-bottom: 6rpx;
		}
	}
	.oper-bottom{
		top: -142rpx;
		
	}
	.oper-top{
		bottom: -142rpx;
		
	}
	
	.oper-tag{
		position: absolute;
		width: 50rpx;
		height: 33rpx;
	}
	.oper-top.oper-tag{
		bottom: -32rpx;
		transform: rotate(180deg);
	}
	.oper-bottom.oper-tag{
		top: -32rpx;
	}
	
	.bottom-start{
		top: -142rpx;
	}
	.bottom-end{
		top: -142rpx;
	}
	.op-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90rpx;
	}

	// 撤回消息提示
	.recall-msg-tips{
		text-align: center;
		color: #BCBCBC;
		font-size: 24rpx;
	}
	// 输入框
	.input-cont{
		position: fixed;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		bottom: 0;

		background-color: #fff;
		border-top: 1rpx solid #EEEEEE;
		z-index: 9;
		.box{
			
			padding: 20rpx 32rpx;
			
			.uni-icons{
				margin-right: 14rpx;
			}
		}
		.text-inp{
			
			display: flex;
			width: 100%;
			background-color: #ECECEC;
			padding: 14rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			max-height: 304rpx;
			overflow-y: scroll;
		}
		.send-module{
			margin-top: 20rpx;
			padding: 0 22rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
		.text{
			width: 100%;
			
			min-height: 36rpx;
		}
		.send-btn{
			line-height: 54rpx;
			height: 54rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
		}
	}
	// 表情列表
	.emoji-list{
		max-height: 440rpx;
		overflow-y: scroll;
		padding: 0 36rpx;
		.em-icon{
			display: inline-block;
			width: 70rpx;
			text-align: center;
			margin-right: 14rpx;
			margin-bottom: 14rpx;
		}
		text{
			font-size: 52rpx;
			
			&:nth-child(8n){
				margin-right: 0;
			}
		}
	}
	// 文件
	.module-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 40rpx 68rpx 0;
		.item{
			text-align: center;
			margin-right: 70rpx;
			margin-bottom: 68rpx;
			&:nth-child(4n){
				margin-right: 0;
			}
		}
		.images{
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: #fff;
			font-size: 0;
			margin-bottom: 12rpx;
		}
	}
	// 发送语音样式
	.record-voice-box{
		// position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #F9F9F9;
		.vo-box{
			// position: absolute;
		}
		.del-voice{
			display: inline-block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			border-radius: 50%;
			background-color: #555;
			text-align: center;
			.uni-icons{
				font-weight: bold;
			}
		}
		.del-voice-active{
			background: rgba(255, 68, 68, .4);
		}
		.voice-tips{
			position: relative;
			margin: 40px auto;
			width: 340rpx;
			padding: 0 10rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #55acee;
			color: #fff;
			display: flex;
			align-items: center;
		}
		.icon{
			height: 80rpx;
			line-height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background-color: #fff;
		}
		.vo-text{
			margin-left: 10rpx;
			font-size: 24rpx;
		}
		.yinpin{
			width: 130rpx;
		}
	}
	
	.vo-box{
		// background-color: #fff;
		// position: absolute;
		overflow: hidden;
		width: 100%;
		bottom: 0;
		text-align: center;
		padding-bottom: 120rpx;
	}
	.rv-tips{
		margin: 60rpx 0 20rpx;
		color: #7f7f7f;
	}
	.record-voice-btn{
		display: inline-block;
			background: #55acee;
		text-align: center;
		height: 200rpx;
		line-height: 200rpx;
		width: 200rpx;
		border-radius: 100rpx;
		box-sizing: border-box;
		text-align: center;
		// border: 4rpx solid #fff;
		// box-shadow: 0rpx -8rpx 40rpx 6rpx #d7d7d7;
	}
	.share-content{
		width: 520rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;
		.sc-title{
			font-size: 28rpx;
			color: #333;
		}
		.sc-name{
			color: #7f7f7f;
			font-size: 24rpx;
		}
		.sc-from{
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
		}
		.sc-image{
			width: 74rpx;
			height: 74rpx;
		}
		.sc-bottom{
			margin-top: 16rpx;
			border-top: 2rpx solid #f2f2f2;
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			image{
				width: 42rpx;
				height: 42rpx;
				border-radius: 21rpx;
				font-size: 24rpx;
				color: #7f7f7f;
			}
		}
	}
</style>
